<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  
    .box{
      height: 160px;
      width: 160px;
    }
    .box img{
      display: block;
      height: 100%;
      width: 100%;
    }
  
  
  </style>
</head>
<body>
    <a href="https://daotu-website-img.oss-cn-hangzhou.aliyuncs.com/upload-file/20190926133829.png" download="img" >下载图片</a>
  <div class="box">
      <img src="https://daotu-website-img.oss-cn-hangzhou.aliyuncs.com/upload-file/20190926133829.png" alt="">
  </div>
  <button class="save">保存图片</button>
  
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var dom = document.querySelector('.box')
    $('.save').on('click',function(){
      // html2canvas(dom,{

      //   allowTaint: true // 允许加载跨域资源
      // }).then(function(canvas) {
      //   dom.appendChild(canvas);
      //   picurl = canvas.toDataURL("image/png");
// });
     save()

    })
    function save() {
    var a = document.createElement("a");
    a.href = 'https://daotu-website-img.oss-cn-hangzhou.aliyuncs.com/upload-file/20190926133829.png';
    a.download = "testImg.jpg";
    a.click();
}

  

  
  
  
  </script>
</body>
</html>
















































<!-- <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
</head>

<body>
  <input type="file" name="" id="file" value="" />
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
  <script type="text/javascript">
    var client
    $.ajax({
      url: 'https://www.donto.cn:9991/api/services/app/BannerService/GetToken',
      type: 'get',
      headers: {
        Authorization: 'Bearer eyJhbGciOiJSUzI1NiIsImtpZCI6IjU1ODAxZjExMGNkNGViYmRjMDE0ZDViMTk5ZmMzZjBmIiwidHlwIjoiSldUIn0.eyJuYmYiOjE1Njk0NjkwOTIsImV4cCI6MTU3MDA3Mzg5MiwiaXNzIjoiaHR0cHM6Ly93d3cuZG9udG8uY246OTk5MSIsImF1ZCI6WyJodHRwczovL3d3dy5kb250by5jbjo5OTkxL3Jlc291cmNlcyIsImFwaSJdLCJjbGllbnRfaWQiOiJDbGllbnQiLCJzdWIiOiIzIiwiYXV0aF90aW1lIjoxNTY5NDY5MDkyLCJpZHAiOiJsb2NhbCIsInVzZXJfaWQiOiIzIiwic2NvcGUiOlsib3BlbmlkIiwicHJvZmlsZSIsImFwaSIsIm9mZmxpbmVfYWNjZXNzIl0sImFtciI6WyJjdXN0b20iXX0.ltDYQ6iOURBe8WsAvuyFn-V0G3doHq734LIBksTjbNjL8GSw7VGgHOov0vMUJ9fNXGp9Tcaa9OcGEpYug9sDF7-89gFXmzYr2kVW9tzyB3NkjAKPnSDhirH6PKSq1OFTqh2XexDTXxAnQQFV0057L932nkIEhu2SnrnShvkBZp_8_jQHWmGSietGQmkKQ6LLNrDsZTs8MSGmPgmlusp7Bz6eaLO3DvK2H9G8uCzt7PK9sl6XkMCs3e5kjT8g7eoSkfpesroqxQJkI4Kbn3nyr6NXbVnmtO-hU3ADSD6eCCHOlJj91b5GcXmLhBCRhlOQTsV9Z0fBROyuD8RopLKEnA'
      },
      success: function (res) {
        console.log(res)
        console.log(res.result.tokenInfo.accessKeyId)
        console.log(res.result.tokenInfo.accessKeySecret)

        client = new OSS.Wrapper({
          region: 'oss-cn-hangzhou',
          accessKeyId: res.result.tokenInfo.accessKeyId,
          accessKeySecret: res.result.tokenInfo.accessKeySecret,
          stsToken: res.result.tokenInfo.securityToken,
          bucket: 'daotu-website-img',
        });
        console.log('2', client)

        $("#file").change(function () {
          console.log("change");
          var f = document.getElementById("file").files[0];
          console.log(f.name);
          var val = document.getElementById("file").value;
          var suffix = val.substr(val.indexOf("."));
          var obj = timestamp(); // 这里是生成文件名

          var storeAs = 'upload-file' + "/" + obj + suffix; //命名空间
          console.log('************', this.files[0])
          client.multipartUpload(storeAs, this.files[0]).then(function (result) {
            console.log(result);
            console.log(JSON.stringify(result));
          }).catch(function (err) {
            console.log(err);
          });
        });
      }
    })

    function timestamp() {
      var time = new Date();
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();


      return "" + y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s);
    }

    function add0(m) {
      return m < 10 ? '0' + m : m;
    }
  </script>
</body>

</html> -->